<template>
    <div class="comp-pay-dialog" id="compConfirmDialog">
        <modal :show="true" :width="400">
            <validator :rules="rules" :parent="_self">
                <form class="m-form-dialog" name="form" action="javascript:;">
                    <div class="modal-header">
                        <a href="javascript:;" class="close" @click="hide()"><span>&times;</span></a>
                        <span class="modal-title">確認打幣？</span>
                    </div>
                    <div class="modal-body">
                        <span class="modal-body-text">請確認您已收到買家付款，點擊此按鈕後系統會將您賬戶託管的{{ currentOrder.number }} {{currentOrder.assetCode}}劃轉給買家。</span>
                        <div class="col-row">
                            <div class="col-input">
                                <input type="password"
                                       class="fn-block"
                                       autocomplete="off"
                                       disableautocomplete
                                       ref="input"
                                       id="payPwd"
                                       name="paypwd"
                                       :placeholder="$t('common.assetPassRequireTip')"
                                       v-model="form.paypwd">
                                <div class="ui-tip"></div>
                            </div>
                            <div class="btn-group">
                                <button type="submit"
                                        class="ui-btn binds"
                                        v-if="isRequesting === false"
                                        @click="submit()">{{$t('common.confirm')}}</button>
                                <button type="submit"
                                        class="ui-btn"
                                        disabled
                                        v-if="isRequesting === true">{{$t('common.waiting')}}...</button>
                            </div>
                        </div>
                    </div>
                </form>
            </validator>
        </modal>
    </div>
</template>
<script type="text/babel">
import modal from "../../../../../grsc-base/component/Modal.vue";
import Validator from "../../../../../grsc-base/component/Validator/main";
import service from "../service";
import CONFIG from "../config";

export default {
  components: {
    modal,
    Validator
  },
  data() {
    return {
      form: {
        paypwd: ""
      },
      rules: {
        paypwd: {
          required: true,
          requiredTip: "請輸入資金密碼"
        }
      },
      isRequesting: false
    };
  },
  props: ["currentOrder"],
  created() {},
  mounted() {
    $(this.$refs.input).focus();
  },
  methods: {
    submit() {
      if (this.rules.$checkAll() === false) {
        return;
      }

      this.isRequesting = true;

      let param = {
        transOrderId: this.currentOrder.transOrderId
      };
      let header = {
        "pay-password": this.form.paypwd
      };
      if (this.currentOrder.status === CONFIG.TRADE_STATUS_COMPLAINNING.KEY) {
        debugger;
        //卖家强制打币
        service
          .forceTransforCoin(param, header)
          .done(rep => {
            if (rep.code === window.CODE.SUCCESS) {
              this.hide();
              window.success(this.$t("common.success"));
            } else if (rep.code === window.CODE.PAY_PWD.CODE) {
              let num = rep.data.num;
              if (3 - num > 0) {
                this.rules.paypwd.$setError(
                  this.$t("common.IncorrectAssetPassTip", { num: 3 - num })
                );
              } else {
                this.rules.paypwd.$setError(
                  window.CODE.PAY_PWD_LOCK[this.$i18n.locale]
                );
              }
            } else if (rep.code === window.CODE.PAY_PWD_LOCK.CODE) {
              this.rules.paypwd.$setError(
                window.CODE.PAY_PWD_LOCK[this.$i18n.locale]
              );
            } else {
              window.error(rep.msg);
            }
          })
          .always(() => {
            this.isRequesting = false;
          });
        return;
      }
      service
        .sellOrderEnsure(param, header)
        .done(rep => {
          if (rep.code === window.CODE.SUCCESS) {
            this.hide();
            window.success(this.$t("common.success"));
          } else if (rep.code === window.CODE.PAY_PWD.CODE) {
            let num = rep.data.num;
            if (3 - num > 0) {
              this.rules.paypwd.$setError(
                this.$t("common.IncorrectAssetPassTip", { num: 3 - num })
              );
            } else {
              this.rules.paypwd.$setError(
                window.CODE.PAY_PWD_LOCK[this.$i18n.locale]
              );
            }
          } else if (rep.code === window.CODE.PAY_PWD_LOCK.CODE) {
            this.rules.paypwd.$setError(
              window.CODE.PAY_PWD_LOCK[this.$i18n.locale]
            );
          } else {
            window.error(rep.msg);
          }
        })
        .always(() => {
          this.isRequesting = false;
        });
    },

    hide() {
      this.$emit("hide");
    }
  }
};
</script>

<style lang="sass" rel="stylesheet/scss">
    .comp-pay-dialog .modal .modal-dialog {
        .modal-body{
            padding: 0 0 32px;
            display: flex;
            flex-direction: column;
            &-text{
                padding: 8px 24px 32px;;
            }
        }
    }
</style>